<template>
<div v-loading="loading"  element-loading-text="拼命努力中"  element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
  <el-row>
    <el-col :span="2.5">
      <b>|日志编辑</b>
    </el-col>
 </el-row>
<hr>  

<el-form ref="form" :model="firstlist" label-width="80px">


  <el-row>
    <el-col :span="8">
  <el-form-item label="日志类型:"> 
    <el-input v-model="lop.logTypeLogname" :readonly="true"></el-input>
      </el-form-item>
</el-col>
<el-col :span="8">
    <el-form-item label="详细类别:">
    <el-input v-model="firstlist.logTypeLogname" :readonly="true"></el-input>
  </el-form-item>
</el-col>
  </el-row>


  <el-row>
    <el-col :span="8">
  <el-form-item label="案件:"> 
    <el-input v-model="firstlist.caseNo" :readonly="true"></el-input>
      </el-form-item>
</el-col>
<el-col :span="8">
    <el-form-item label="客户名称:">
    <el-input v-model="firstlist.client" :readonly="true"></el-input>
  </el-form-item>
</el-col>
  </el-row>


  <el-row>
    <el-col :span="8">
  <el-form-item label="开始时间:"> 
    <el-input v-model="firstlist.joblogStarttime" type="date" @change="shijian"></el-input>
      </el-form-item>
</el-col>
<el-col :span="8">
    <el-form-item label="结束时间:">
    <el-input v-model="firstlist.joblogEnddtime" type="date"  @change="shijian"></el-input>
  </el-form-item>
</el-col>
  </el-row>

  <el-row>
    <el-col :span="8">
  <el-form-item label="自报时长(时):"> 
    <el-input v-model="firstlist.joblogReportedtime" ></el-input>
      </el-form-item>
</el-col>
<el-col :span="8">
    <el-form-item label="跟新时间:">
    <el-input v-model="firstlist.joblogUpdatetime" type="date"></el-input>
  </el-form-item>
</el-col>
  </el-row>




  <el-row>
    <el-col :span="8">
  <el-form-item label="公开状态:">
  <el-radio-group v-model="firstlist.joblogStatus">
      <el-radio label="N"  >未公开</el-radio>
      <el-radio  label="Y" >公开</el-radio>
 </el-radio-group>
<br>
    <font color='red'><b>提示:公开后,客户可通过自主查询来查询服务记录</b></font>
  </el-form-item>
</el-col>
<el-col :span="8">
    <el-form-item label="相关文件:">
      <el-upload
      class="upload-demo"
      action=""
      :http-request="submitUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :before-upload="beforeUpload"
      multiple
      :limit="1"
      :on-exceed="handleExceed"
      list-type="picture-card"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb
        <el-input  v-model="firstlist.joblogFile"  v-show="false"></el-input>
      </div>
    </el-upload>


  </el-form-item>
</el-col>
  </el-row>

 <el-row>

<el-col :span="20">
    <el-form-item label="工作描述:">
   <el-input v-model="firstlist.joblogText" type="textarea"></el-input>
  </el-form-item>
</el-col>
  </el-row>
  <el-col :span="1">
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">立即提交</el-button>
  </el-form-item>
</el-col>



       </el-form>
        </div>
</template>

<script>
export default {
  name: "LogJobxiugai",
  data(){
    return{
               firstlist: {},
        los:{ userRealname :JSON.parse(localStorage["user"])[0].userRealname}
        ,lop:{},    loading: true,
      files: "", fileName: "",fileList:[]
      }
  },

   methods: {
        //文件上传
        beforeUpload(file){//文件上传之前
    this.files=file;
    this.fileName=file.name;
},
        handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        console.log(fileList);
        return this.$confirm(`确定移除 ${ file.name }?`);
     
      },
      //提交文件
      submitUpload(){
    if (this.files.size / 1024  >500) {
      this.$message.error('错误提示：请上传小于500kb的文件')
        return false
    }
    let fileFormData = new FormData();
    fileFormData.append('file', this.files, this.fileName);//file是键，files是值，就是要传的文件，fileName是要传的文件名
    let requestConfig = {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
    };
    this.$http.post("/file",fileFormData,requestConfig)         
    .then(res=>{
      this.firstlist.joblogFile=res.data.data

    })


      },
//文件上传结束
//提交
    onSubmit(){
    
   this.$http.put("/logJob/xiugai",this.firstlist).then(res=>{
     if(20000==res.data.status){this.$router.push('logjob')}
     else{ alert('修改失败')}

     })
    },
    //开始时间减去结束时间  =自报时间 
    shijian(){ 
      //开始时间 
      var sta=new Date(this.firstlist.joblogStarttime).getTime();
      //结束时间
          var end=new Date(this.firstlist.joblogEnddtime).getTime();
    
             //自报时间joblogReportedtime
              this.firstlist.joblogReportedtime=Math.floor((end-sta)/1000/60/60)
    },  
      //根据id渲染所需要的数据
    fu(){

      this.$http.post('/logJob/chakan', { 'jobid':this.$route.query.jobid})
          .then(res =>{  this.firstlist=res.data.data[0]
            console.log(this.firstlist)
            this.firstlist.jobid=this.$route.query.jobid
            //根据id渲染他的爹
            this.$http.post('/logJob/rizhileixing', { 'logTypePid':this.firstlist.logTypePid})
                .then(res =>{  this.lop=res.data.data[0]
                this.loading=false;
                  //console.log(this.lop);
                })
          })
    
        }
  },created() {
      this.fu()
  }
}
</script>

<style scoped>
span{
  color: red;
}
.bg-purple-light {
  background:#E9EEF3;
}
</style>